<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotStyle">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="width: 375px;height: 375px;">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index" style="width: 100%;height: 100%;">
						<image :src="item.img" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- <scroll-view class="goods-image-list" scroll-x="true">
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
			<view id="demo1" class="goods-image-item uni-bg-red">A</view>
			<view id="demo2" class="goods-image-item uni-bg-green">B</view>
			<view id="demo3" class="goods-image-item uni-bg-blue">C</view>
		</scroll-view> -->


		<view class="goods-info">
			<view class="goods-price"><span style="font-size: 12px;margin-top: 20px;">到手价</span><span style="margin-top: 10px;">￥</span><em
					style="font-size: 30px;font-style: normal;font-weight: bold;">{{productSku.price}}</em><span
					style="font-size: 18px;margin-top: 12px;">.00</span></view>
			<view class="goods-title">{{productSpu.productSpuName}}&nbsp;&nbsp;&nbsp;&nbsp;{{productSku.productSkuName}}
			</view>
			<view class="goods-icons">
				<view class="goods-icon">
					<uni-icons type="redo" size="30"></uni-icons>
					<text class="buttons_title">分享</text>
				</view>
				<view class="goods-icon">
					<uni-icons type="star" size="30"></uni-icons>
					<text class="buttons_title">收藏</text>
				</view>
				<view class="goods-icon">
					<uni-icons type="wallet" size="30"></uni-icons>
					<text class="buttons_title">降价通知</text>
				</view>
			</view>
		</view>


		<view class=" goods-floor">
			<view class="sku-info" @click="showSkuAttr">
				<view class="sku-selected">
					<text class="item-title">已选</text>
					<text class="item-choose" id="skuChoose">{{productSku.productSkuName}},{{byuNum}}个</text>
				</view>
			</view>

		</view>

		<view>
			<!-- #ifdef MP-WEIXIN -->
			<rich-text :nodes="productSpu.descDetail"></rich-text>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view v-html="productSpu.descDetail"></view>
			<!-- #endif -->
		</view>

		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>


		<!-- 选择SKU弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change" borderRadius="10px 10px 0px 0px">
			<view class="popup-content">

				<view class="popup-sku">
					<view class="popup-sku-image">
						<image :src="info[0].img" mode="" style="width: 100px;height: 100px;margin-left: 20px;"></image>
					</view>
					<view class="popup-sku-info">
						<view class="popup-sku-price">到手价：{{productSku.price}}</view>
						<view class="popup-sku-selected-attr">
							已选{{productSku.productSkuName}},{{byuNum}}个
						</view>
					</view>
					<view class="popup-sku-close" @click="closeSelect">
						<uni-icons type="close" size="24"></uni-icons>
					</view>
				</view>
				<view class="popup-sku-attr" style="overflow: auto;height: 250px;">
					<view class="popup-sku-attr-title" v-for="(item,index) in prdouctAttrs.speNameList" :key="item.id">
						{{item.name}}
						<view class="popup-sku-attr-valus">
							<view @click="changeVal(item.name,values.value)" class="attr-val"
								:class="{'attr-checked':values.selected}"
								v-for="(values,index) in prdouctAttrs.skuValues" :key="values.id" v-if="item.id === values.speId">
								{{values.value}}
							</view>
						</view>
					</view>
				</view>
				<view class="buyer-sku">
					<view class="popup-sku-attr-title">
						数量
					</view>

					<view class="popup-sku-attr-num">
						<uni-number-box v-model="byuNum" value="1" :min="1" @change="changeValue" />
					</view>

				</view>
				<view class="popup-bottons">
					<view class="uni-tab__cart-button-left" @click="buttonClick()">
						<text class="uni-tab__cart-button-right-text">
							加入购物车
						</text>

					</view>
					<view class="uni-tab__cart-button-right" @click="buttonClick()">
						<text class="uni-tab__cart-button-right-text">
							立即购买
						</text>

					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
	import jpa from '../../jpa/jpa.js';
	
	import { getGoodsDetail,loadAttr,val,cartCount,insertCart } from '../../jpa/detail.js';
	
	export default {
		data() {
			return {
				// borderRadius:"",
				info: [],
				dotStyle: {
					// backgroundColor: 'rgba(255, 90, 95,0.3)',
					width: '20%',
					bottom: '20px',
					left: '86%',
					textWidth: '100%',
					textPaddingLeft: "",
					borderRadius: "20px",
					padding: "2px 0",
					justifyContent: "flex-end",
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				modeIndex: -1,
				current: 0,
				mode: 'nav',
				swiperDotIndex: 0,
				byuNum: 1,
				skuId: 0,
				cart:{
					skuId:0,
					byNum:0,
					buyPrice:undefined
				},
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff',
						
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				productSku: {},
				productSpu: {},
				prdouctAttrs: {},

			}

		},
		onLoad(option) {
			console.log(option); //打印出上个页面传递的参数。
			this.goodsDetail(option.skuId);
			this.shopCartCount();
			
		},
		methods: {
			
			shopCartCount(){
				cartCount().then(data=>{
					this.options[2].info = data;
				})
			},
			
			onClick(data){
				console.log("左侧",data)
				if(data.index==2){
					uni.switchTab({
						url:"/pages/cart/cart"
					})
				}
			},
			buttonClick(data){
				
				
				this.cart.byNum = this.byuNum;
				insertCart(this.cart).then(data=>{
					if(data == 0){
						this.shopCartCount();
						uni.showToast({
							title:"添加成功！"
						})
					} else {
						uni.showToast({
							title:"网络错误请重试!",
							icon:'error'
						})
					}
				})
				
			},

			goodsDetail(skuId) {
				getGoodsDetail(skuId).then(data=>{
					this.info = data.imgList;
					this.productSku = data.productSku;
					this.productSpu = data.productSpu;
					this.cart.skuId = Number.parseInt(data.productSku.productSkuId);
					this.cart.buyPrice = data.productSku.price;
					this.onloadAttr(this.productSpu.productSpuId, this.productSku.productSkuName);
				})
				
			},

			onloadAttr(spuId, skuAttr) {
				
				loadAttr(spuId).then(data=>{
					this.prdouctAttrs = data
					
					this.prdouctAttrs.skuValues.forEach(item => {
						item.selected = false;
						if (this.attrName(skuAttr, item.value)) {
							item.selected = true;
						}
					});
				})
			},

			attrName(skuAttr, attrValue) {

				let attrs = skuAttr.split("；");

				let result = false;
				attrs.forEach(item => {
					if (item.substring(item.indexOf("：") + 1) == attrValue) {
						result = true;
						return result;
					}
				})
				return result;
			},

			closeSelect() {
				this.$refs.popup.close();
			},
			change() {

			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			showSkuAttr() {
				this.$refs.popup.open("bottom")
			},
			changeVal(speName, attrValue) {

				let name = this.productSku.productSkuName.split("；");

				let newName = "";

				name.forEach((item, index) => {

					if (item.split("：")[0] == speName) {
						
						console.log("替换",item.replace(item.substring(item.indexOf("：") + 1), attrValue))

						item = item.replace(item.substring(item.indexOf("：") + 1), attrValue);

					}

					if (index == 0) {

						newName = item;

					} else {

						newName += "；" + item;

					}

				})
				
				val(newName,this.productSpu.productSpuId).then(data=>{
					this.goodsDetail(data.productSkuId)
				})

			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #f4f4f4;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}


	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}




	.goods-image-list {
		white-space: nowrap;
		width: 100%;


		.goods-image-item {
			display: inline-block;
			width: 40px;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			margin: 10px 12px;
		}
	}

	.goods-info {
		background-color: #FFF;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;

		.goods-price {
			padding: 12px 18px 10px;
			color: #ff0004;
			display: flex;
		}

		.goods-title {
			padding: 12px 18px;
			font-weight: 700;
			line-height: 21px;
		}

		.goods-icons {
			width: 100%;
			display: flex;
			padding: 4px 18px 12px;

			.goods-icon {
				display: flex;
				align-items: center;
				flex: 1;
				height: 16px;
				font-size: 12px;

			}

		}
	}



	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}


	.goods-floor {
		background-color: #FFF;
		display: flex;
		border-radius: 12px;
		margin-top: 12px;
		padding: 0 18px;

		.sku-info {
			color: #8c8c8c;
			font-size: 13px;
			padding: 18px 0;
			position: relative;
			width: 100%;

			.sku-selected {
				display: flex;

				.item-title {
					font-weight: 700;
					width: 38px;
					display: inline-block;
					color: #060606;
				}

				.item-choose {
					text-overflow: ellipsis;
					display: inline-block;
					width: 80%;
					/* height: 15px; */
					white-space: nowrap;
					overflow: hidden;
				}
			}



		}
	}

	.sku-info::after {
		background: url(//img20.360buyimg.com/img/jfs/t1/168610/10/40795/8056/64eedda4F1aed004e/a8502bb8121e0c68.png) no-repeat;
		background-position: -386px -40px;
		display: inline-block;
		height: 40px;
		position: absolute;
		transform: scale(.5) translate(20px, -10px);
		-webkit-transform: scale(.5) translate(20px, -10px);
		width: 40px;
		content: "";
		right: 0;
		top: 12px;

	}

	.popup-content {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.popup-sku {
			display: flex;
			align-items: flex-end;
			height: 118px;
			margin-bottom: 18px;
			text-align: left;

			.popup-sku-image {
				flex: 1;
			}

			.popup-sku-info {
				flex: 2;

				.popup-sku-price {
					color: #fa1e0a;
				}
			}

			.popup-sku-close {
				position: absolute;
				right: 0px;
				top: 0px;
				width: 32px;
				margin: 1rem;
				cursor: pointer;
			}


		}


		.popup-sku-attr {

			.popup-sku-attr-title {
				padding-left: 18px;
				margin-top: 10px;
				font-size: 11px;
			}


			.popup-sku-attr-valus {
				display: flex;
				padding: 0 10px;
				flex-wrap: wrap;

				.attr-val {
					border-radius: 20px;
					background-color: #f2f2f2;
					padding: .2rem 1rem;
					margin: 1rem.5rem;
				}
			}
		}

		.buyer-sku {
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.popup-sku-attr-title {
				padding-left: 18px;
				margin-top: 10px;
				font-size: 11px;
			}

		}

		.popup-bottons {
			display: flex;
			height: 40px;
			margin-top: 1rem;
			margin-bottom: .5rem;
			justify-content: space-evenly;

			.uni-tab__cart-button-right,
			.uni-tab__cart-button-left {
				/* #ifndef APP-NVUE */
				display: flex;
				flex-direction: column;
				/* #endif */
				// flex: 1;
				width: 45%;
				justify-content: center;
				align-items: center;
				/* #ifdef H5 */
				cursor: pointer;
				/* #endif */
				border-radius: 20px;

			}

			.uni-tab__cart-button-left {
				background: linear-gradient(90deg, #FE6035, #EF1224),
			}

			.uni-tab__cart-button-right {
				background: linear-gradient(90deg, #FFCD1E, #FF8A18),
			}

			.uni-tab__cart-button-right-text {
				color: #FFF;
			}


		}

		.attr-checked {
			border: 1px solid #f2270c;
			color: #f2270c;
		}
	}
</style>